<!--购物车-->
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="../../utils/css/bootstrap.min.css" />
  <link rel="stylesheet" href="../assets/css/base.css">
  <link rel="stylesheet" href="../assets/css/car.css">
  <script src="../../utils/jquery/jquery.3.7.min.js"></script>
  <script src="../../utils/js/bootstrap.bundle.js"></script>
</head>
<body>
<div class="container">
    <div class="cart-thead row">
      <div class="t-checkbox col">
        <input type="checkbox" name="" class="checkall"> 全选
      </div>
      <div class="t-goods col">商品</div>
      <div class="t-price col">单价</div>
      <div class="t-num col">数量</div>
      <div class="t-sum col">小计</div>
      <div class="t-action col">操作</div>
    </div>
    <div class="cart-item-list">
      <div class="cart-item row">
        <div class="t-checkbox col">
          <input type="checkbox" name="" class="check-item">
        </div>
        <div class="t-goods col">商品信息</div>
        <div class="t-price col">¥12.00</div>
        <div class="t-num col">
          <div class="quantity-form">
            <a href="javascript:;" class="decrement">-</a>
            <input type="text" class="itxt" value="1">
            <a href="javascript:;" class="increment">+</a>
          </div>
        </div>
        <div class="p-sum col">¥12.00</div>
        <div class="t-action col del-btn" >删除</div>
      </div>
      <div class="cart-item row">
        <div class="t-checkbox col">
          <input type="checkbox" name="" class="check-item">
        </div>
        <div class="t-goods col">商品信息</div>
        <div class="t-price col">¥12.00</div>
        <div class="t-num col">
          <div class="quantity-form">
            <a href="javascript:;" class="decrement">-</a>
            <input type="text" class="itxt" value="1">
            <a href="javascript:;" class="increment">+</a>
          </div>
        </div>
        <div class="p-sum col">¥12.00</div>
        <div class="t-action col del-btn" >删除</div>
      </div>
    </div>
  <!-- 结算模块 -->
  <div class="cart-floatbar">
    <div class="select-all">
      <input type="checkbox" name="" id="" class="checkall">全选
    </div>
    <div class="operation">
      <a href="javascript:;" class="remove-batch"> 删除选中的商品</a>
      <a href="javascript:;" class="clear-all">清理购物车</a>
      <a href="javascript:;" class="add-pro">新增商品</a>
    </div>
    <div class="toolbar-right">
      <div class="amount-sum">已经选<em>0</em>件商品</div>
      <div class="price-sum">总价： <em>￥0.00</em></div>
      <div class="btn-area">去结算</div>
    </div>
  </div>
</div>
</body>
<script type="text/javascript">
  $(function() {
    //全选框
    $('.checkall').change(function() {
       $('.cart-item-list').find('input[type=checkbox]').prop('checked', $(this).prop('checked'))
       $('.checkall').prop('checked', $(this).prop('checked'))
       calSum()
    })

    //批量删除
    $('.remove-batch').on('click', function() {
      $('.check-item:checked').parents('.cart-item').remove()
      calSum()
    })

    //清理购物车
    $('.clear-all').on('click', function() {
      $('.cart-item-list').empty()
    })

   //新增商品
    $('.add-pro').on('click', function() {
      const itemStr=`
            <div class="cart-item row">
        <div class="t-checkbox col">
          <input type="checkbox" name="" class="check-item">
        </div>
        <div class="t-goods col">商品信息</div>
        <div class="t-price col">¥12.00</div>
        <div class="t-num col">
          <div class="quantity-form">
            <a href="javascript:;" class="decrement">-</a>
            <input type="text" class="itxt" value="1">
            <a href="javascript:;" class="increment">+</a>
          </div>
        </div>
        <div class="p-sum col">¥12.00</div>
        <div class="t-action col del-btn" >删除</div>
      </div>`
      $(itemStr).appendTo('.cart-item-list')
    })
  })


  //动态生成的数据绑定数据需要独立出来

  //单行总价
  function calRowSum(curr,num){
    const price=parseInt($(curr).parents().siblings('.t-price').text().slice(1))
    const cal=(price*parseInt(num)).toFixed(2)
    $(curr).parents().siblings('.p-sum').text('¥'+cal)
  }

  //合计
  function calSum(){
    let sumMoney=0 //总价
    let sumNum=0//总数
    //计算选中的商品单价和总数
    $('.check-item:checked').each(function() {
      sumMoney+=parseFloat($(this).parent().siblings('.p-sum').text().slice(1))
      sumNum+=parseInt($(this).parent().siblings('.t-num').find('.itxt').val())
    })
    //注意toFixed方法会自动将数字转化为字符串
    $('.price-sum em').text('¥'+sumMoney.toFixed(2))
    $('.amount-sum em').text(sumNum)
  }

  //数量减1
  $(document).on('click','.decrement', function() {
    const curr=parseInt($(this).next().val())
    if(curr!==0){
      $(this).next().val(curr-1)
      calRowSum(this,parseInt($(this).next().val()))
      calSum()
    }
  })

  //数量加1
  $(document).on('click','.increment', function() {
    const curr=parseInt($(this).prev().val())
    $(this).prev().val(curr+1)
    calRowSum(this, parseInt($(this).prev().val()))
    calSum()
  })


  //删除行
  $(document).on('click','.del-btn', function() {
    $(this).parents('.cart-item').remove()
    alert('删除成功')
    calSum()
  })

  //列表自动全选框
  $(document).on('change','.check-item', function() {
    if($('.check-item:checked').length===$('.check-item').length){
      $('.checkall').prop('checked', true)
    }else{
      $('.checkall').prop('checked', false)
    }
    checkedColor(this)
    calSum()
  })

  //选中高亮
  function checkedColor(_this){
    if ($(_this).prop("checked")) {
      // 让当前的商品添加 check-cart-item 类名
      $(_this).parents(".cart-item").addClass("check-cart-item");
    } else {
      // check-cart-item 移除
      $(_this).parents(".cart-item").removeClass("check-cart-item");
    }
  }
</script>
</html>